<template>
	<view class="container">
		<view class="content" v-if="paySuccess">
			<view class="top-div">
				<view class="success-icon">
					<image src="/static/sj_pay_success.png" class="image" mode="widthFix">
					</image>
				</view>
				<view class="tit">恭喜支付成功</view>
				<uni-list>
					<uni-list-item title="支付方式" right-text="微信支付" class="zffs"></uni-list-item>
					<uni-list-item title="支付金额" :right-text="'¥'+money" class="zfje"></uni-list-item>
				</uni-list>
			</view>
		</view>
		<view class="content" v-if="paySuccessDaTi">
			<view class="top-div">
				<view class="success-icon">
					<image src="/static/sj_pay_success.png" class="image" mode="widthFix">
					</image>
				</view>
				<view class="tit">恭喜答题成功，商品即将出货</view>
			</view>
		</view>
		<view class="content" v-if="payError">
			<view class="top-div">
				<view class="success-icon">
					<uni-icons type="clear" size="80" color="#ff0909"></uni-icons>
				</view>
				<view class="errortit">支付失败，请重新扫码支付</view>
			</view>
		</view>
		<uni-popup ref="popup" :isMaskClick="false">
			<view class="sm-div">
				<view class="sm-div-bg ">
					<view class="sm-title ">
						<uni-list-chat :avatar-circle="true" :avatar="tData.headimg">
						</uni-list-chat>
						<button type="primary" size="mini" open-type="chooseAvatar" @chooseavatar="getavatar">获取头像</button>
					</view>
					<view class="sm-neirong">
						<input type="nickname" v-model="tData.nickName" @blur="nickNameInput" placeholder="请输入昵称" />
					</view>
					<view class="sm-neirong flex">
						<view class="shouji">
							<uni-easyinput v-model="tData.phone" placeholder="手机号" disabled :inputBorder="false"
								:styles="{disableColor:'#fff'}" />
						</view>

						<button type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="getphone">获取手机号</button>
					</view>
					<view class="sm-btn">
						<view class="btncss" @click="queding">
							确定
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="daTiPopup" :isMaskClick="false">
			<view class="sm-div">
				<view class="sm-div-bg ">
					<view class="dtlb_div">
						<view class="dtlb_list" v-for="(item ,index) in dtList" :index="index" :key="index">
							<view class="title">
								{{item.title}}
							</view>
							<view class="uni-list dtxx-list">
								<checkbox-group v-if="item.typeId==2&&someShow" @change="checkboxChange($event,index)">
									<label class="uni-list-cell uni-list-cell-pd dtnr" v-for="(uitem,uindex) in item.daAnJson"
										:key="uindex">
										<view>
											<checkbox :value="uitem.options" :checked="uitem.checked" color="#DF686A" />
										</view>
										<view>{{uitem.options}}、{{uitem.con}}</view>
									</label>
								</checkbox-group>
								<radio-group v-else-if="someShow" @change="radioChange($event,index)">
									<label class="uni-list-cell uni-list-cell-pd dtnr" v-for="(uitem,uindex) in item.daAnJson"
										:key="uindex">
										<view>
											<radio :value="uitem.options" :checked="uitem.checked" color="#DF686A" />
										</view>
										<view>{{uitem.options}}、{{uitem.con}}</view>
									</label>
								</radio-group>
								<view class="correctAnswer" v-if="showDuiCuo">
									正确答案：{{item.correctAnswer}}
								</view>
								<view class="duicuo" v-if="showDuiCuo">
									<image v-if="!item.isError" src="/static/sj_dt_dui.png" mode="scaleToFill" class="image"></image>
									<image v-else src="/static/sj_dt_cuo.png" mode="scaleToFill" class="image"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="btn-div wrap">
						<view class="btncss" @click="addDati" v-if="!showDuiCuo">提交</view>
						<view class="btncss" @click="reloadDaTi" v-else>再测一次</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="chuHuoError" :is-mask-click="false">
			<view class="pp-div">
				<view class="pp-div-bg">
					<view class="title">
						提示
					</view>
					<view class="bqwenzi">
						出货失败，请联系客服<text @click="$public.telPhone(machinePhone)">{{machinePhone}}</text>处理~
					</view>
					<view class="btn-div">
						<view class="btncss" @click="$public.telPhone(machinePhone)">
							联系客服
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				paySuccess: false,
				payError: false,
				money: "",
				macData: {},
				tData: {
					headimg: "",
					nickName: "",
					phone: ""
				},
				openId: "",
				token: "",
				dtList: [],
				someShow: true,
				showDuiCuo: false,
				dtBtnFlag: true,
				paySuccessDaTi: false,
				myLocation: null,
				machinePhone: "15858500359",
				keepStatus: null
			}
		},
		onLoad(options) {
			// this.$refs.chuHuoError.open()
			// console.log("options", options)
			console.log("options.q", decodeURIComponent(options.q))
			// console.log("q", decodeURIComponent(
			// 	"https%3A%2F%2Fweilai.wlsj.site%2F%3Fwlsj%3D1616168888%401%2C0.01%2C%E6%B5%8B%E8%AF%95%E5%95%86%E5%93%81"))
			// this.$public.htmlPost("/api/addMachineParam", {
			// 	nr: JSON.stringify(options)
			// })
			this.getUserLocation(options)


		},
		methods: {
			...mapMutations(['login']),
			getUserLocation(options) {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						let longitude = res.longitude
						let latitude = res.latitude
						let params = {
							city: "未获取到",
							name: "未获取到",
							lng: longitude,
							lat: latitude,
						}
						that.myLocation = params
						that.getVerify(options)
					},
					fail(err) {
						console.log(err, '获取经纬度失败')
						uni.showModal({
							title: "温馨提示",
							content: "请先打开位置获取",
							showCancel: false,
							success: function() {
								that.getUserLocation(options)
							}
						})
					},
				});
			},
			addDati() {
				// console.log("that.dtList", this.dtList)
				let that = this
				if (that.dtBtnFlag) {
					that.dtBtnFlag = false
					let flag = true
					let index = 0;
					that.$_.forEach(that.dtList, function(item, key) {
						// console.log("key", key);
						// console.log("value", value);
						if (!that.$_.some(item.daAnJson, "checked")) {
							that.$api.msg(`还未答题`);
							flag = false;
							that.dtBtnFlag = true;
							return
						}
						index++
					})
					if (flag) {
						let errorNum = 0;
						let daduijson = []
						that.dtList.forEach(item => {
							let datiData = that.$_.filter(item.daAnJson, function(o) {
								return o.checked;
							});
							// console.log("datiData", datiData);
							let daanstr = datiData.map(o => {
								return o.options
							}).join(",");
							// console.log("daanstr", daanstr);
							if (daanstr != item.correctAnswer) {
								errorNum++
								item.isError = true
							} else {
								daduijson.push({
									questionId: item.questionId,
									daanstr: daanstr
								})
								item.isError = false
							}
						})
						if (daduijson.length > 0) {
							that.$refs.daTiPopup.close()
							that.createOrderInfo()
						} else {
							uni.showModal({
								title: "答错了！",
								content: `很遗憾，您没有答对题目`,
								showCancel: false,
								confirmText: "再测一次",
								success: function(res) {
									that.reloadDaTi()
								}
							})
						}
						that.dtBtnFlag = true;
					}
				}
			},
			async createOrderInfo() {
				const createOrderInfoRes = await this.$public.htmlPostMachinePay(
					`/open/api/order/createOrderInfo`, {
						mid: this.macData.mid,
						slotNo: this.macData.slotNo,
						openId: this.openId,
						salePrice: this.macData.money,
						orderPayType: 11,
						orderStatus: 0
					})
				console.log("createOrderInfoRes", createOrderInfoRes)
				this.paySuccessDaTi = true
				this.keepChuHuo()
				this.$public.htmlPost("/api/addMachineOrder", {
					code: createOrderInfoRes.data.data.value,
					integral: 0,
					productName: this.macData.productName,
					productModel: this.macData.day,
					remark: JSON.stringify(this.macData)
				}, this.token).then((res) => {
					console.log("创建订单", res)
				})
			},
			reloadDaTi() {
				let that = this
				that.dtList.forEach(item => {
					item.daAnJson.forEach(uitem => {
						uitem.checked = false
					})
				})
				that.someShow = false
				that.$nextTick(function() {
					that.someShow = true
					that.showDuiCuo = false
				})
			},
			checkboxChange(e, index) {
				// console.log("e", e)
				// console.log("e", index)
				let that = this
				let detail = e.detail.value
				that.dtList[index].daAnJson.forEach(item => {
					if (that.$_.indexOf(detail, item.options) >= 0) {
						item.checked = true
					} else
						item.checked = false
				})
			},
			radioChange(e, index) {
				// console.log("e", e)
				// console.log("e", index)
				let that = this
				let detail = e.detail.value
				that.dtList[index].daAnJson.forEach(item => {
					if (detail == item.options) {
						item.checked = true
					} else
						item.checked = false
				})
			},
			nickNameInput(e) {
				console.log("nickNameInput", e)
				this.tData.nickName = e.detail.value
			},
			getavatar(e) {
				console.log("getavatar", e)
				this.tData.headimg = e.detail.avatarUrl
			},
			async uploadHeadImg(e) {
				const [err, {
					data
				}] = await uni.uploadFile({
					url: this.baseUrl + '/api/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
				});
				let res = JSON.parse(data);
				let info = {
					headImg: res.fileName,
				}
				this.$public.htmlPost("/api/changeImg", info).then((res) => {
					let data = res.data;
					if (data.code == 0) {
						this.headimg = info.headImg
					}
				})
			},
			getphone(e) {
				let that = this
				// console.log("getphone", e)
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					uni.request({
						url: that.baseUrl + "/wechat/ma/phoneNumber",
						data: {
							code: e.detail.code,
						},
						success(res) {
							// console.log("phoneNumber", res)
							let data = res.data;
							if (data.code == 0) {
								that.tData.phone = data.data.phone_info.phoneNumber
							}
							console.log("phone", that.tData.phone)
						}
					})
				} else {
					uni.showModal({
						title: "温馨提示",
						content: "请授权获取手机号"
					})
				}
			},
			queding() {
				if (!this.tData.headimg || !this.tData.nickName.trim() || !this.tData.phone) {
					uni.showModal({
						title: "温馨提示",
						content: "请填写所有用户信息"
					})
					return false;
				}
				this.toLogin()

			},
			async toLogin() {
				// console.log("toLogin")
				let that = this;
				// console.log("profile", profile)
				const [err, {
					data
				}] = await uni.uploadFile({
					url: that.baseUrl + '/api/upload',
					filePath: this.tData.headimg,
					name: 'file',
				});
				let res = JSON.parse(data);
				let info = {
					nickName: this.tData.nickName,
					avatarUrl: res.fileName,
					phone: this.tData.phone
				}

				uni.request({
					url: that.baseUrl + "/api/fastBuilding",
					data: {
						weCatId: this.openId,
						nickName: info.nickName,
						headImg: info.avatarUrl,
						phone: info.phone,
						parentId: 0
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					success(r) {
						console.log("fastBuilding", r)
						that.$api.msg(r.data.msg);
						if (r.data.code == 0) {
							uni.removeStorageSync("parentId")
							that.login({
								token: r.data.data.token,
								nickName: info.nickName,
								headimg: info.avatarUrl,
								openId: that.openId,
								typeId: r.data.data.user.typeId,
								id: r.data.data.user.memberId,
								jmsStatus: r.data.data.user.sex,
								phone: info.phone
							})
							that.nickName = info.nickName
							that.headimg = info.avatarUrl
							that.phone = info.phone
							that.$refs.popup.close()
							that.token = r.data.data.token
							if (that.macData.isPay == 1)
								that.getMachineDistance()
							else
								that.machinePay()

							// that.$public.reload()
						} else {
							that.$api.msg(res.data.msg)
						}
					}
				})
				return false

			},
			async getVerify(options) {
				let that = this
				let openid = "";
				const js_code = await new Promise((resolve, reject) => {
					// uni.login非异步，所以用Promise包装  
					uni.login({
						provider: 'weixin',
						success: res => {
							resolve(res.code);
						},
						fail: err => {
							reject(err);
						}
					});
				})
				let loginFlag = false
				const sessionRes = await this.$public.htmlPostMachinePay(
					`/pay/api/wechart/getSessionNew?code=${js_code}&appId=wx8a0697c8cc98ca5e`, null, "GET")
				console.log("sessionRes", sessionRes)
				openid = sessionRes.data.openid
				// openid = "sdfsdthfghgfsdf234234234"
				this.openId = openid
				// this.keepChuHuo()
				const loginRes = await this.$public.htmlPost("/api/login", {
					openId: openid
				})
				console.log("loginRes", loginRes)

				if (loginRes.data.code == 0) {
					this.token = loginRes.data.data.token
					if (loginRes.data.data.user.phone)
						loginFlag = true
				}
				let url = decodeURIComponent(options.q)
				this.$public.htmlPost("/api/addMachineInfo", {
					nr: url,
				})
				// "https://weilai.wlsj.site/?wlsj=1616168888@1,0.01,测试商品"  解析后的内容
				let dataArr = url.split("wlsj=")[1].split("@");
				let mid = dataArr[0] //机器号
				let paramArr = dataArr[1].split(",");
				let slotNo = paramArr[0]; //货道号
				let money = paramArr[1]; //金额
				let productName = paramArr[2]; //产品名称
				let isPay = paramArr[3] //1=否，2=是
				let day = paramArr.length >= 5 ? paramArr[4] : 0 //间隔天数 0=永久,大于0为间隔天数
				this.macData = {
					mid: mid,
					slotNo: slotNo,
					money: money,
					productName: productName,
					isPay: isPay,
					day: day
				}
				if (!loginFlag) {
					that.$refs.popup.open()
				} else {
					// const bindRes = await this.$public.htmlPostMachinePay("/minprogram/api/member/bind", {
					// 	wxOpenId: openid,
					// 	pubOpenId: ""
					// })
					// console.log("bindRes", bindRes)

					// const verifyRes = await this.$public.htmlPostMachinePay("/minprogram/api/member/verify", {
					// 	wxOpenId: openid,
					// 	pubOpenId: ""
					// })
					// console.log("verifyRes", verifyRes)
					// const getProductRes = await this.$public.htmlPostMachinePay(
					// 	`/pay/api/product/getProduct?mid=${options.mid}&slotNo=${options.slotNo}`)
					// console.log("getProductRes", getProductRes)
					// this.getMachineDistance()  //全限制范围
					if (isPay == 1) { //只在答题领取时限制范围
						this.getMachineOrder()
					} else {
						this.machinePay()
					}
				}
			},
			async getMachineOrder() {
				let that = this
				this.$public.htmlPost("/api/getMachineOrder", {
					productName: this.macData.productName,
					day: this.macData.day
				}, this.token).then((res) => {
					console.log("getMachineOrder res", res)
					let data = res.data;
					if (data.code == 0) {
						if (data.data.length > 0) {
							if (that.macData.day > 0) {
								uni.showModal({
									title: "温馨提示",
									content: data.msg,
									showCancel: false,
									success: function(res) {
										that.$public.switchTabTo("/pages/index/index")
										// that.machinePay()
									}
								})
								return false
							} else {
								let flag = true
								const today = new Date(); // 获取今天的日期
								const isToday = that.$_.some(data.data, (item) => {
									const createTimeDate = new Date(item.createTime);
									return that.$_.isEqual(
										today.getDate(),
										createTimeDate.getDate() &&
										today.getMonth() === createTimeDate.getMonth() &&
										today.getFullYear() === createTimeDate.getFullYear()
									);
								});
								if (isToday) {
									flag = false
								} else {
									const hasSameName = data.data.some(item => item.productName == that.macData.productName);
									if (hasSameName) {
										flag = false
									}
								}
								if (!flag) {
									uni.showModal({
										title: "温馨提示",
										content: data.msg,
										showCancel: false,
										success: function(res) {
											that.$public.switchTabTo("/pages/index/index")
											// that.machinePay()
										}
									})
									return false
								} else {
									this.getMachineDistance()
								}
							}
						} else {
							this.getMachineDistance()
							// this.daTiList()
						}
					}
				})
			},
			getMachineDistance() {
				let that = this
				this.$public.htmlPost("/api/getMachineDistance", {
					machineCode: this.macData.mid
				}, this.token).then((res) => {
					console.log("getMachineDistance res", res)
					let data = res.data;
					if (data.code == 0) {
						let point = data.data.bak1.replace("，", ",").split(",")
						if (point.length == 2) {
							let juli = this.$public.distance(point[0], point[1], that.myLocation.lat, that.myLocation.lng) * 1000
							if (juli > data.data.remark) {
								uni.showModal({
									title: "温馨提示",
									content: "您不在机器有效范围内",
									showCancel: false,
									success: function() {
										that.$public.switchTabTo("/pages/index/index")
									}
								})
								return false
							}
							this.daTiList()
							// if (this.macData.isPay == 1) {
							// 	this.getMachineOrder()
							// } else {
							// 	this.machinePay()
							// }
							// console.log("juli", juli)

						}
					} else {
						uni.showModal({
							title: "温馨提示",
							content: "二维码有误，请联系商家",
							showCancel: false,
							success: function(res) {
								that.$public.switchTabTo("/pages/index/index")
							}
						})
					}
				})
			},
			async daTiList() {
				let that = this
				this.$public.htmlPost("/api/getQuestionList", {
					articleId: 0,
					rand: 1
				}, this.token).then((res) => {
					console.log("getQuestionList res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							item.daAnJson = JSON.parse(item.chooseAnswer)
						})
						that.dtList = data.data
						that.$refs.daTiPopup.open()
						// that.dtList.push(data.data[0])
					}
				})
			},
			async machinePay() {
				let that = this
				const createUnifiedOrderRes = await this.$public.htmlPostMachinePay(
					`/order/api/orderInfo/createUnifiedOrder`, {
						payType: 11,
						mid: this.macData.mid,
						appId: 'wx8a0697c8cc98ca5e',
						slotNo: this.macData.slotNo,
						openId: this.openId
					})
				console.log("createUnifiedOrderRes", createUnifiedOrderRes)
				const payRes = await this.$public.htmlPostMachinePay(
					`/pay/api/pay/pay`, createUnifiedOrderRes.data)
				console.log("payRes", payRes)

				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					timeStamp: payRes.data.timeStamp, // 时间戳（单位：秒）
					nonceStr: payRes.data.nonceStr, // 随机字符串
					package: payRes.data.package, // 固定值
					signType: payRes.data.signType, //固定值
					paySign: payRes.data.paySign, //签名
					success: function(res) {
						console.log("success", res);
						console.log("支付成功");
						that.money = money
						that.paySuccess = true
						that.keepChuHuo()
						// let json = []
						that.$public.htmlPost("/api/addMachineOrder", {
							code: createUnifiedOrderRes.data.parameter.detail.goods_detail[0]
								.goods_id,
							integral: money,
							productName: productName,
							productModel: this.macData.day
						}).then((res) => {
							console.log("创建订单", res)
						})
						// that.$public.reLaunch("/pages/money/paySuccess", {
						// 	orderId: that.orderId,
						// 	type: that.payType,
						// 	code: code,
						// 	money: that.money
						// })

					},
					fail: function(err) {
						// console.log("fail", err);
						console.log("支付失败");
						that.payError = true
					}
				})
			},
			async keepChuHuo() {
				let that = this
				this.keepStatus = setInterval(() => {
					that.$public.htmlPostMachinePay("/open/api/order/getOrderList", {
						OpenId: that.openId
					}).then(res => {
						console.log("res", res)
						let data = res.data.data
						if (data.length > 0) {
							let item = data[0]
							if (item.orderStatus == 4) {
								that.getMachinePhone()
								clearInterval(that.keepStatus);
							}
							if (item.orderStatus == 5 || item.orderStatus == 6) {
								clearInterval(that.keepStatus);
							}
						}
					})
				}, 2000);
			},
			async getMachinePhone() {
				let res = await this.$public.htmlPost("/api/getMachinePhone")
				console.log("res", res)
				if (res.data.code == 0)
					this.machinePhone = res.data.msg
				this.$refs.chuHuoError.open()
			}
		},
		onUnload() {
			clearInterval(this.keepStatus);
		}
	}
</script>

<style lang='scss' scoped>
	.content {
		text-align: center;
	}

	.image {
		width: 240rpx;
		height: 240rpx;

	}

	.top-div {
		/* background: #f7f7f7; */
		padding-top: 44rpx;
	}

	.success-icon {
		margin-bottom: 45rpx;
	}

	.tit {
		font-size: 32rpx;
		color: #029B00;
	}

	.errortit {
		font-size: 32rpx;
		color: #ff0909;
	}

	.titnum {
		color: #ff0909;
		font-size: 32rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiatext {
		color: #ff0909;
		font-size: 28rpx;
		color: #333;
		/* line-height: 2; */

	}

	/deep/.uni-list {
		text-align: left;
		margin-top: 50rpx;

		.uni-list-item {
			background: #f7f7f7;
		}

	}

	.quzhuanjifen {
		background: #f7f7f7;
		height: 207rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: $uni-wl-bottom-border;
		margin-top: 50rpx;

		.zjf-btn {
			height: 88rpx;
			width: 415rpx;
			display: flex;
			justify-content: center;
			color: #ff1200;
			font-size: 28rpx;
			border: 1px solid #ff1200;
			align-items: center;
			border-radius: 10rpx;
		}
	}

	.btn-group {
		padding-top: 100upx;
	}

	.mix-btn {
		/* margin-top: 30upx; */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 100rpx;
		font-size: $font-lg;
		color: #fff;
		background-color: $uni-color-warning;
		border-radius: 10upx;
		margin: 30upx auto 0;

		&.hollow {
			background: #fff;
			color: #303133;
			border: 1px solid #ccc;
		}
	}

	.zffs {
		/deep/.uni-list-item__extra-text {
			color: #029B00;
			font-size: 32rpx;
		}
	}

	.zfje {
		/deep/.uni-list-item__extra-text {
			color: #FF9466;
			font-size: 32rpx;
		}
	}

	.sm-div {

		padding: $uni-wrap-padding;

		.sm-div-bg {

			background: linear-gradient(180deg, #FFF2F2 0%, #FFFFFF 100%);
			padding: 40rpx;
			border-radius: 20rpx;
			min-width: 500rpx;

			&.xzsf-div {
				.sm-title {
					color: #333333;
					font-size: 34rpx;
					justify-content: center;
					margin-bottom: 30rpx;
				}

				.sm-list {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #0f6dc9;
					width: 240rpx;
					margin: 0 auto 30rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #E6E6E6;

					&.active {
						border: 2rpx solid #DF686A;
					}

					.image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 15rpx;
					}
				}
			}

			.sm-title {
				font-size: 36rpx;
				text-align: center;
				// padding-bottom: 20rpx;
				color: #0f6dc9;

				/deep/.uni-list--border {
					display: none;
				}

				display: flex;
				align-items: center;
				justify-content: flex-start;

				/deep/.uni-list-chat {
					background: none;

					.uni-list-chat__header-image {
						background: #fff;
					}
				}
			}

			.sm-neirong {
				padding: 10rpx 20rpx;
				border: 1px solid #d5d5d5;
				border-radius: 10rpx;
				/* margin-bottom: 20rpx; */
				margin: 20rpx 0 40rpx;

				&.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.shouji {
						width: 200rpx;
					}
				}

				input {
					font-size: 24rpx;
				}

				/deep/.uni-input-input {
					font-size: 24rpx;
				}

				.input-placeholder {
					font-size: 24rpx;
				}
			}

			.sm-btn {
				.btncss {
					height: 60rpx;
				}
			}

			.sm-list {
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				height: 80rpx;

				.image {
					width: 25rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
			}

			.btn-div {
				display: flex;
				justify-content: center;

				.btncss {
					width: 330rpx;
					height: 80rpx;
				}
			}
		}
	}

	.dtlb_div {
		.dtlb_list {
			.dtnr {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;
				font-size: 28rpx;
				color: #666666;
			}

			.title {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}

		.correctAnswer {
			font-size: #333333;
			margin: 24rpx 0;
			color: #029B00;
		}

		.dtxx-list {
			position: relative;

			.duicuo {
				position: absolute;
				right: 0;
				top: 0;

				.image {
					width: 56rpx;
					height: 56rpx;
				}
			}
		}
	}

	.pp-div {

		padding: $uni-wrap-padding;

		background: linear-gradient(180deg, #FFF2F2 0%, #FFFFFF 100%);
		border-radius: 16rpx;
		padding: 30rpx;

		.pp-div-bg {
			min-width: 500rpx;
			// max-height: 700rpx;
			overflow-y: auto;
			width: 540rpx;
			text-align: center;

			.title {
				font-size: 34rpx;
				color: #333333;
				font-weight: bold;

			}

			.bqwenzi {
				font-size: 34rpx;
				font-weight: bold;
				color: #DF686A;
				line-height: 40rpx;
				margin: 40rpx 0;
			}

			.huizi {

				color: #999999;
				font-size: 28rpx;
				text-align: center;
				margin-bottom: 16rpx;
			}

			.dianhua {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333333;
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 64rpx;

				.dianhuaquan {
					width: 48rpx;
					height: 48rpx;
					margin-left: 24rpx;
				}


			}

			.btn-div {
				display: flex;
				justify-content: center;
			}

			.btncss {
				background: linear-gradient(135deg, #DF686A 0%, #EE8D56 100%);
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(223, 104, 106, 0.25);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				width: 330rpx;
				height: 80rpx;
				letter-spacing: 10rpx;
			}

			.lvzi {
				color: #029B00;
				font-size: 34rpx;
				margin: 40rpx 0;
			}

			.ewm {
				width: 320rpx;
				height: 320rpx;
				background: rgba(223, 104, 106, 0.1);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 20rpx;

				.image {
					width: 280rpx;
					height: 280rpx;
				}
			}

			.juzhong {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 42rpx;
				margin-bottom: 16rpx;
			}
		}
	}
</style>